<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        body{
            background-color: black;
        }
    </style>
    <script src="jquery-3.5.1.min.js"></script>
    <script>
		
        $(function () {
            $(document).click(function (e) {
                let xNew=e.pageX;
                let yNew=e.pageY;
                let left = $("img").offset().left;
                let top = $("img").offset().top;
                let xC=xNew-left;
                let yC=yNew-top;
                    if (xC < 0) {
                        left = xNew;
                        top = yNew;
                        $("img").attr("src", "img/player_left.gif").animate({
							//焦点放到图片中心
                            left: left-134,
                            top: top-108
                        }, 2000);
                    }
                    if (xC > 0) {
                        left = xNew;
                        top = yNew;
                        $("img").attr("src", "img/player_right.gif").animate({
							//焦点放到图片中心
                            left: left-134,
                            top: top-108
                        }, 2000);
                    }
               });
			   $(document).dblclick(function(){
				  //双击变身
				  $("img").attr("src","img/player2.gif"); 
			   });
        });
    </script>
</head>
<body>
	<div>
	    <img src="img/player_right.gif" style="position: absolute;">
	</div>
</body>
<html>

